<template>
  <view class="uni-container">
		<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
			<uni-tr>
				<uni-th v-for="col in columns" :key="col.field" width="200px" align="left">{{ col.field }}</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in tableData" :key="index">
        <uni-td v-for="col in columns" :key="col.field" width="200px" align="left">{{ item[col.field] }}</uni-td>
			</uni-tr>
		</uni-table>
		<view class="uni-pagination-box">
      <uni-pagination show-icon :page-size="pageSize" :current="pageIndex" :total="total" @change="change" />
    </view>
	</view>
</template>

<script>
import { SqliteDataBase } from '@daelui/dogjs/dist/components.js'
export default {
	data () {
		return {
			searchVal: '',
			columns: [],
			tableData: [],
			// 每页数据量
			pageSize: 10,
			// 当前页
			pageIndex: 1,
			// 数据总量
			total: 0,
			loading: false
		}
	},

	onLoad() {
    this.initView()
		this.selectedIndexs = []
    this.getData(1)
	},

  onNavigationBarButtonTap (item) {
    if (item.category === 'delete') {
      this.handleDelete()
    }
  },

	methods: {
    initView () {
      let data = uni.getStorageSync('db_table')
      if (data.table) {
        uni.setNavigationBarTitle({
          title: data.table
        })
      }
      let db = new SqliteDataBase({
        dbName: data.dbName,
        dbPath: data.dbPath
      })
      this.db = db
    },
		// 多选处理
		selectedItems() {
			return this.selectedIndexs.map(i => this.tableData[i])
		},
		// 多选
		selectionChange(e) {
			this.selectedIndexs = e.detail.index
		},
		// 批量删除
		handleDelete() {
      let list = this.tableData.filter((item, i) => {
        return this.selectedIndexs.indexOf(i) > -1
      })
      if (!list.length) {
        this.$u.toast('未选择数据')
        return false
      }
      // 删除
      uni.showModal({
        title: '提示',
        content: '确认删除吗?',
        success: (res) => {
          if (res.confirm) {
            let data = uni.getStorageSync('db_table')
            // 查询表数据
            this.db.table(data.table).delete(list).then(res => {
              this.$refs.table.clearSelection()
              this.selectedIndexs = []
              this.getData(1)
            })
          }
        }
      })
		},
		// 分页触发
		change(e) {
			this.$refs.table.clearSelection()
			this.selectedIndexs.length = 0
			this.getData(e.current)
		},
		// 搜索
		search() {
			this.getData(1, this.searchVal)
		},
		// 获取数据
		getData(pageIndex, value = '') {
			this.loading = true
			this.pageIndex = pageIndex
      let data = uni.getStorageSync('db_table')
      // 查询表数据
      this.db.table(data.table).queryByPage({}, {
        limit: { pageIndex: this.pageIndex, pageSize: this.pageSize },
      }).then(res => {
        let data = (res.data || [])[0]
        if (data) {
          this.columns = Object.keys(data).map(key => {
            return {
              field: key
            }
          })
        }
        this.tableData = res.data
        this.total = res.page.total
        this.loading = false
      })
		}
	}
}
</script>

<style lang="scss" scoped>
.uni-container {
  padding: 8px;
}
.uni-pagination-box {
  padding-top: 12px;
  /deep/ .uni-pagination__num-tag {
    min-width: 28px;
  }
}
</style>
